<template>
  <ul id="level-root">
    <item
      class="item"
      :isWhite="isWhite"
      :isTitleInput="isTitleInput"
      :levelCount="levelCount"
      :model="treeData">
    </item>
  </ul>
</template>

<script>
  import item from './item'
  export default {
    name: 'LevelOptionBox',
    data () {
      return {
        treeData: {
          name: 'root',
          children: []
        }
      }
    },
    props: {
      isTitleInput: Boolean, // 是否需要标题输入框
      isWhite: Boolean, // 表单按钮是否可点击
      size: Number, // 该组件你需要的宽度
      levelCount: Number,
      // 初始化数据
      initData: {
        type: Array,
        default () {
          return []
        }
      }
    },
    watch: {
      initData (cur, old) {
        this.treeData = {
          value: 'root',
          child: JSON.parse(JSON.stringify(cur))
        }
      }
    },
    components: {
      item
    },
    beforeMount () {
      this.treeData = {
        value: 'root',
        child: JSON.parse(JSON.stringify(this.initData))
      }
    }
  }
</script>

<style lang="stylus" scoped>
  #level-root
    position relative
    width 100%
    /*border 1px solid #ccc*/
    height 400px
    overflow auto
</style>
